<script setup>
import {ref} from 'vue';
const name = ref('');
const salary = ref('');
const job = ref('');
const staffArr = ref([]);
const add = () => {
  if(name.value.trim() === '' || salary.value.trim() === '' || job.value.trim() === ''){
    alert('输入信息不能为空');
    return;
  }
  staffArr.value.push({
    name: name.value,
    salary: salary.value,
    job: job.value
  })
  name.value = '';
  salary.value = '';
  job.value = '';
}
</script>

<template>
  <h1>员工列表练习</h1>
  <input type="text" v-model="name" placeholder="请输入员工姓名">
  <input type="text" v-model="salary" placeholder="请输入员工工资">
  <input type="text" v-model="job" placeholder="请输入员工岗位">
  <button @click="add">添加员工</button>
  <hr>
  <table border="1">
    <tr>
      <td>序号</td>
      <td>姓名</td>
      <td>工资</td>
      <td>岗位</td>
    </tr>
    <tr v-for="(item,index) in staffArr">
      <td>{{index+1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.salary}}</td>
      <td>{{item.job}}</td>
    </tr>
  </table>

</template>

<style scoped>

</style>